<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Agent Stream API 测试</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        h1 {
            color: #333;
            text-align: center;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input, textarea, select {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        button:hover {
            background-color: #45a049;
        }
        #response {
            margin-top: 20px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background-color: white;
            min-height: 300px;
            white-space: pre-wrap;
            overflow-y: auto;
        }
        .message {
            margin-bottom: 10px;
            padding: 10px;
            border-radius: 4px;
        }
        .user {
            background-color: #e3f2fd;
        }
        .agent {
            background-color: #f1f8e9;
        }
        .thinking {
            background-color: #fff8e1;
            font-style: italic;
        }
        .system {
            background-color: #ffebee;
            color: #c62828;
        }
    </style>
</head>
<body>
    <h1>Agent Stream API 测试</h1>
    
    <div class="form-group">
        <label for="project_id">工程ID:</label>
        <input type="number" id="project_id" value="1" required>
    </div>
    
    <div class="form-group">
        <label for="vendor">模型厂商:</label>
        <select id="vendor">
            <option value="OpenAI">OpenAI</option>
            <option value="DeepSeek">DeepSeek</option>
            <option value="Qwen">Qwen</option>
            <option value="OpenAI-China">OpenAI-China</option>
        </select>
    </div>
    
    <div class="form-group">
        <label for="task_type">任务类型:</label>
        <select id="task_type">
            <option value="ask">ask</option>
            <option value="note">note</option>
        </select>
    </div>
    
    <div class="form-group">
        <label for="context">上下文(JSON格式):</label>
        <textarea id="context" rows="3">{}</textarea>
    </div>
    
    <div class="form-group">
        <label for="query">用户问题:</label>
        <textarea id="query" rows="3" required></textarea>
    </div>
    
    <button id="send">发送请求</button>
    <button id="clear">清空响应</button>
    
    <div id="response"></div>
    
    <script>
        document.getElementById('send').addEventListener('click', function() {
            const projectId = document.getElementById('project_id').value.trim();
            const vendor = document.getElementById('vendor').value.trim();
            const taskType = document.getElementById('task_type').value.trim();
            const context = document.getElementById('context').value.trim();
            const query = document.getElementById('query').value.trim();
            
            if (!projectId || !query) {
                alert('工程ID和用户问题不能为空!');
                return;
            }
            
            // 验证JSON格式
            try {
                if (context) {
                    JSON.parse(context);
                }
            } catch (e) {
                alert('上下文必须是有效的JSON格式!');
                return;
            }
            
            const responseContainer = document.getElementById('response');
            responseContainer.innerHTML = '<div class="message user"><strong>用户问题:</strong> ' + query + '</div>';
            responseContainer.innerHTML += '<div class="message system"><strong>系统:</strong> 正在连接流式响应...</div>';
            
            // 构建URL
            const url = `/api/v1/agent/stream?project_id=${projectId}&vendor=${vendor}&task_type=${taskType}&context=${encodeURIComponent(context)}&query=${encodeURIComponent(query)}`;
            
            // 创建EventSource
            const eventSource = new EventSource(url);
            
            eventSource.onmessage = function(event) {
                const data = JSON.parse(event.data);
                
                // 检查是否完成
                if (data.type === '[DONE]') {
                    eventSource.close();
                    responseContainer.innerHTML += '<div class="message system"><strong>系统:</strong> 响应完成</div>';
                    return;
                }
                
                // 跳过空内容
                if (!data.content || data.content.trim() === '') {
                    return;
                }
                
                // 处理不同类型的消息
                switch (data.type) {
                    case 'system':
                        responseContainer.innerHTML += `<div class="message system"><strong>系统:</strong> ${data.content}</div>`;
                        break;
                    case 'thinking':
                        // 过滤掉thought:前缀
                        let thinkingContent = data.content;
                        if (thinkingContent.startsWith('thought:')) {
                            thinkingContent = thinkingContent.substring(8).trim();
                        }
                        
                        // 如果过滤后内容为空，则跳过
                        if (thinkingContent.trim() === '') {
                            return;
                        }
                        
                        responseContainer.innerHTML += `<div class="message thinking"><strong>思考:</strong> ${thinkingContent}</div>`;
                        break;
                    case 'agent':
                        responseContainer.innerHTML += `<div class="message agent"><strong>AI:</strong> ${data.content}</div>`;
                        break;
                    default:
                        responseContainer.innerHTML += `<div class="message"><strong>${data.type}:</strong> ${data.content}</div>`;
                }
                
                // 自动滚动到底部
                responseContainer.scrollTop = responseContainer.scrollHeight;
            };
            
            eventSource.onerror = function(error) {
                console.error('EventSource错误:', error);
                eventSource.close();
                responseContainer.innerHTML += '<div class="message system"><strong>错误:</strong> 连接中断</div>';
            };
        });
        
        document.getElementById('clear').addEventListener('click', function() {
            document.getElementById('response').innerHTML = '';
        });
    </script>
</body>
</html> 